<template>
    <div class="main">
		<img src="../../assets/img/backicon.png" class="backbtn" @click="back" alt="">
        <h1>重置密码</h1>
		<h3>手机号验证</h3>
		<div class="phones">
			<img class="phone-icon" :src="phone" alt="">
			<div class="phone-input">
				<span :class="['phone-Prefix','input-span-color-0']">+ 86 </span>
				<input type="tel" class="phone-dep" v-model="phoneNum"/>
			</div>
		</div>

		<div class="pwd">
			<img class="phone-icon2" :src="board" alt="">
			<div class="phone-input">
				<input type="password" style="width: 100px;" v-model="validata"/>
				<van-button type="default" size="small" class="valibtn" @click.native="getHotVali()" :disabled="!isnotsend">
					<p style="margin-bottom:0;" v-if="isnotsend">获取验证码</p>
					<van-count-down v-else :time="time" format="sss"/>
				</van-button>
			</div>
		</div>

        <div>
            <h3 class="setnewtext">设置新密码</h3>
            <div class="phones">
                <img class="phone-icon2" :src="lock" alt="">
                <div class="phone-input">
                    <input type="password" placeholder=" 新密码" v-model="newpwd" @blur="valipwdrule"/>
                </div>
            </div>

            <div class="pwd">
                <img class="phone-icon2" :src="locker" alt="">
                <div class="phone-input">
                    <input type="password"  v-model="valipwd" placeholder=" 确认密码"/>
                </div>
            </div>
        </div>



        <div class="bottom-btn">
            <img class="regbtn" :src="canToConfirm?Confirm:unConfirm" alt="" @click.once="FindBack">
        </div>
	</div>
</template>
<script>
import { _sendvalidatecode,_ajaxforget } from '../../service/user.js'
export default {
    data(){
        return{
            phone:require('../../assets/img/phone.png'),
            board:require('../../assets/img/board.png'),
            lock:require('../../assets/img/unlocked.png'),
            locker:require('../../assets/img/lock.png'),

            phoneNum:"",
			validata:"",
			
			isnotsend:true,
			time:60000,

            newpwd:"",
            valipwd:"",

			canToConfirm:false,
			Confirm:require('../../assets/img/forgetUpdated.png'),
            unConfirm:require('../../assets/img/forgetUpdate.png'),

        }
	},
	activated(){
		this.phoneNum=""
		this.validata=""
		this.newpwd=""
		this.valipwd=""
	},
	watch:{
		phoneNum (newValue, oldValue) {
			if (newValue > oldValue) {
				if (newValue.length === 4 || newValue.length === 9 ) {
					var pre = newValue.substring(0, newValue.length - 1)
					var last = newValue.substr(newValue.length - 1, 1)
					this.phoneNum = pre + ' ' + last
				} else {
					this.phoneNum = newValue
				}
			} else {
				if (newValue.length === 9 || newValue.length === 4) {
					this.phoneNum = this.phoneNum.trim()
				} else {
					this.phoneNum = newValue
				}
			}
		},
		validata(newValue, oldValue){
			// this.canToReg=false
			// if(this.validatephone(this.phoneNum)&&this.validataMsg(this.validata)){
				
			// }
		},
		valipwd(val){
			this.canToConfirm=false
			if(this.valipwd==this.newpwd){
				this.canToConfirm=true
			}
		}
	},
    methods:{
		back(){
			this.$router.push("/login")
		},
		validataMsg(val){
			if(!(/^[0-9]{4}$/.test(val))){
				return false
			}
			return true
		},
		valipwdrule(){
            // 6-12位
            if(this.newpwd.length<6 || this.newpwd.length>12){
                this.$toast.fail("密码请输入6~12个字符",)
                return false
            }else if(this.newpwd.length==0){
                this.$toast.fail("密码不能为空")
                return false
            }else if(/^\d+$/.test(this.newpwd))
            {
                this.$toast.fail("请输入数字和字母")
                return false
            }else if(/^[a-z]+$/i.test(this.newpwd))
            {
                this.$toast.fail("请输入数字和字母")
                return false
            }else if(!/^[A-Za-z0-9]+$/.test(this.newpwd))
            {
                this.$toast.fail("只能含有数字和字母")
                return false
            }
            return true
        },
        validatephone(val){
			let nub=val.replace(/\s*/g,"").replace("+86","")
			if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(nub))){ 
				return false; 
			} 
			return true
		},
		getHotVali(){
			let _this=this
			if(this.validatephone(this.phoneNum)){
				let nub=_this.phoneNum.replace(/\s*/g,"").replace("+86","")
				this.isnotsend=false
				setTimeout(()=>{
					_this.isnotsend=true
				},60000)
				_sendvalidatecode({mobile:nub}).then(res=>{
					_this.$toast(res.message)
				})
			}else{
				this.$toast.fail('请输入正确的手机号');
			}
		},
		FindBack(){
			let _this=this
			if(!this.canToConfirm){
				return
			}
			let nub=_this.phoneNum.replace(/\s*/g,"").replace("+86","")
			if(!this.validatephone(nub)){
				this.$toast.fail('请输入正确的手机号');
				return
			}
			if(this.validataMsg()){
				this.$toast.fail('验证码有误');
				return
			}
			if(!this.valipwdrule()){
				return
			}
			_ajaxforget({
				mobile:nub,
				mobile_code:this.validata,
				password:this.newpwd,
				repassword:this.valipwd
			}).then(res=>{
				_this.$toast(res.message)
				if(res.errcode==1){
					_this.$router.push('/login')
				}
			})
		}
    }
}
</script>
<style scoped>
	.main{
		height: 100%;
		width: 100%;
		padding-top: 118px;
    }
    .main>h1{
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: 1000;
        font-size: 18px;
        position: absolute;
        top: 25px;
        left: 150px;
    }
	.main>h3{
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: bold;
		font-size: 16px;
		margin: 0 0 0 67px;
		color: #000;
		font-weight: blod;
    }
    .setnewtext{
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: bold;
		font-size: 16px;
		margin: 4.5vh 0 4.5vh 67px;
		color: #000;
    }
	.phones{
		width: 100%;
		height: 32px;
		margin-top: 4vh;

	}
	.pwd{
		width: 100%;
		height: 32px;
		margin-top: 6vh;

	}
	.phone-icon{
		width: 12px;
		margin: 0 16px 5px 74px;
		display: inline-block;
		line-height: 32px;
	}
	.phone-icon2{
		width: 13px;
		margin: 0 16px 5px 74px;
		display: inline-block;
		line-height: 32px;
	}
	input{
		background:none;  
		outline:none;  
		border:none;
		height: 30px;
		line-height: 30px;
		font-family: "DINPro-Bold";
		font-size: 16px;
		color: #000;
	}
	.backbtn{
		width: 9px;
		position: absolute;
		top: 30px;
		left: 18px;
	}
	.phone-input{
		display: inline-block;
		height: 35px;
		width: 205px;
		border-bottom: 1px solid #efefef;
	}


	.phone-dep{
		width: 70%;
	}
	.phone-Prefix{
		display: inline-block;
		font-family: "DINPro-Bold";
		font-size: 16px;
		margin-right: 4px;
	}
	.input-span-color-c{
		color: #ccc;
	}
	.input-span-color-0{
		color: #000;
	}

	.phone-input::-webkit-input-placeholder { /* WebKit browsers */
		color: rgb(204, 204, 204);
		font-size: 13px;
		font-family: "PingFang SC","Microsoft YaHei";
		line-height: 33px;
	}

	.phone-input::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: rgb(204, 204, 204);
		font-size: 13px;
		font-family: "PingFang SC","Microsoft YaHei";
		line-height: 33px;
	}

	.phone-input:-ms-input-placeholder { /* Internet Explorer 10+ */
		color: rgb(204, 204, 204);
		font-size: 13px;
		font-family: "PingFang SC","Microsoft YaHei";
		line-height: 33px;
	}  


	.phones::-webkit-input-placeholder { /* WebKit browsers */
		color: rgb(204, 204, 204);
		font-size: 13px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}

	.phones::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: rgb(204, 204, 204);
		font-size: 13px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}

	.phones:-ms-input-placeholder { /* Internet Explorer 10+ */
		color: rgb(204, 204, 204);
		font-size: 13px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}  
	.pwd::-webkit-input-placeholder { /* WebKit browsers */
		color: rgb(204, 204, 204);
		font-size: 13px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}

	.pwd::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: rgb(204, 204, 204);
		font-size: 16px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}

	.pwd:-ms-input-placeholder { /* Internet Explorer 10+ */
		color: rgb(204, 204, 204);
		font-size: 16px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}  

    
	.regbtn{
		display: block;
        width: 340px;
        margin: 0 auto;
	}
	.more{
		width: 100%;
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: bold;
		font-size: 13px;
		color: #ccc;
	}
	.more p{
		text-align: center;
	}
	.more span:nth-child(1){
		display: inline-block;
		color: #333;
		margin-left: 4px;
	}


	.valibtn{
		display: inline-block;
		width: 80px;
		height: 30px;
		line-height: 30px;
		margin-bottom: 6px;
		background-color: #f5f5f5;
		float: right;
		color: #666;
		font-size: 10px;
		font-family: "PingFang SC","Microsoft YaHei";
	}


	@media (max-height: 812px) {
		.bottom-btn{
			width: 100%;
			display: block;
			margin: 24vh auto 0 auto;
		}
	}
	@media (max-height: 670px) {
		.bottom-btn{
			width: 100%;
			display: block;
			margin: 13.5vh auto 0 auto;
		}
	}
</style>